<template>
<div class="wrapper">
  <head title="Selling" :autoback="false" @backClick="backClick"></head>
  <scroller class="scroller">
    <div class="selBox">
      <div class="bb"></div>
      <input class="titleInput" placeholder="Title" v-model="title" type="text" />
      <div class="bb"></div>
      <textarea class="textarea" placeholder="Item description" rows="4" v-model="content"></textarea>
    </div>
    <div class="imgBox">
      <div class="photoBor" v-for="(item,index) in imgView" :key="index">
        <image class="photoItem" :src="item" resize="cover" @click="showPreview(index)" />
        <image @click="removePhoto(index)" class="photodel" src="root:img/delete.png" alt />
        <text class="posterTxt" v-if="index==posterIndex">POSTER</text>
      </div>
      <div class="photoBox">
        <image @click="pickPhoto" class="clickPhoto" src="root:img/photo.png" resize="contain" />
        <input v-if="isWeb" class="fileInput" type="file" value id="file" @change="uploadConfig" />
      </div>
    </div>
    <div class="bb"></div>

    <div class="selBox">
      <div class="cellItem" @click="pickAddress">
        <text class="iconfont location">&#xe648;</text>
        <text class="newType">{{dAddress}}</text>
      </div>
    </div>
    <div class="mt20 mb50">
      <div class="locationBox bb" @click="popType='conditi',showMask=true">
        <text class="meth_title">Conditions</text>
        <div class="meth_right">
          <text class="cityName">{{shopType||"Please Select"}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div v-if="!price" class="locationBox bb" @click="popType='price',showMask=true">
        <text class="meth_title">Price</text>
        <div class="meth_right">
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div v-if="price" class="locationBox bb" @click="popType='price',showMask=true">
        <div class="priceArea">
          <text class="nowPrice">AU${{price}}</text>
          <div class="rowbox">
            <text class="infoP br">Initial price</text>
            <text class="infoP br">AU${{orgprice}}</text>
          </div>
        </div>
        <div class="meth_right">
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div class="locationBox bb" @click="popType='contact',showMask=true">
        <text class="meth_title">Contact details</text>
        <div class="meth_right">
          <text class="cityName">{{contact_phone||contact_emails}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div class="locationBox bb" @click="popType='method',showMask=true">
        <text class="meth_title">Shipping methods</text>
        <div class="meth_right">
          <text
            class="cityName"
          >{{postWay1?'Australia post':postWay2?'Giv delivery':selfGet?'Local pick up':'Please Select'}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div
        class="locationBox bb"
        @click="popType='postage',showMask=true"
        v-if="postWay1||postWay2"
      >
        <text class="meth_title">Delivery Fee</text>
        <div class="meth_right">
          <text class="cityName" v-if="postageType=='1'">AU$ {{postage}}</text>
          <text class="cityName" v-if="postageType=='2'">Offer free postage</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
    </div>
  </scroller>
  <!-- 下一步 -->
  <text class="confirmBtn" @click="postShop">Confirm</text>
  <wxc-popup
    height="600"
    pos="bottom"
    ref="wxcpopup"
    :show="showMask"
    @wxcPopupOverlayClicked="showMask=false"
  >
    <!-- 联系方式 -->
    <div class="alertScroll priceCon" v-if="popType=='contact'">
      <div class="selectLi">
        <text class="liTit">Phone</text>
        <div class="inputBoxs">
          <input class="liInput inputPc" type="tel" maxlength="10" v-model="contact_phone" />
        </div>
      </div>
      <div class="selectLi">
        <text class="liTit">Email</text>
        <div class="inputBoxs">
          <input class="liInput inputPc" type="email" maxlength="50" v-model="contact_emails" />
        </div>
      </div>
    </div>
    <!-- 商品是否全新 -->
    <div class="shopAlert" v-if="popType=='conditi'">
      <div class="alertScroll">
        <div class="robox">
          <text class="roTit">Conditions</text>
          <div class="radioBox">
            <div
              class="radioLi"
              v-for="(item,index) in shopTypeArr"
              :key="index"
              @click="shopType=item"
            >
              <text
                class="liIcon"
                :class="[item==shopType?'selected':'']"
              >{{item==shopType?"&#xe602;":"&#xe67f;"}}</text>
              <text class="liTxt" :class="[item==shopType?'selected':'']">{{item}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 价格输入 -->
    <div class="alertScroll priceCon" v-if="popType=='price'">
      <div class="selectLi">
        <text class="liTit">Price</text>
        <div class="inputBoxs">
          <text class="priceLabel">AU$</text>
          <input class="liInput inputPc" type="number" maxlength="8" v-model="price" />
        </div>
      </div>
      <div class="selectLi">
        <text class="liTit">Original price</text>
        <div class="inputBoxs">
          <text class="priceLabel">AU$</text>
          <input class="liInput inputPc" type="number" maxlength="8" v-model="orgprice" />
        </div>
      </div>
    </div>
    <!-- 寄件方式 -->
    <div class="shopAlert" v-if="popType=='method'">
      <!-- <text class="alertTop">Shipping method</text> -->
      <div class="alertScroll">
        <div class="robox">
          <text class="roTit">Shipping methods</text>
          <!-- <div class="radioBox">
            <div
              class="radioLi"
              v-for="(item,index) in postTypeArr"
              :key="index"
              @click="postType=item.value;postTypeName=item.name"
            >
              <div class="radioLiBox">
                <text
                  class="liIcon"
                  :class="[item.value==postType?'selected':'']"
                >{{item.value==postType?"&#xe602;":"&#xe67f;"}}</text>
                <text class="liTxt" :class="[item.value==postType?'selected':'']">{{item.name}}</text>
              </div>
              <div v-if="item.value=='2'" class="iconqsBox" @click="showPropOver('methPropc')">
                <image class="iconqs" src="root:img/iconQS.png" resize="contain" />
              </div>
            </div>
          </div>-->

          <div class="radioLi">
            <div class="radioLiBox" @click="postWay1=!postWay1">
              <text
                class="liIcon"
                :class="[postWay1?'selected':'']"
              >{{postWay1?"&#xe602;":"&#xe67f;"}}</text>
              <text class="liTxt" :class="[postWay1?'selected':'']">Australia post</text>
            </div>
          </div>
          <!-- <div class="radioLi">
            <div class="radioLiBox" @click="postWay2=!postWay2">
              <text
                class="liIcon"
                :class="[postWay2?'selected':'']"
              >{{postWay2?"&#xe602;":"&#xe67f;"}}</text>
              <text class="liTxt" :class="[postWay2?'selected':'']">Giv delivery</text>
            </div>
            <div class="iconqsBox" @click="showPropOver('methPropc')">
              <image class="iconqs" src="root:img/iconQS.png" resize="contain" />
            </div>
          </div>-->
          <div class="radioLi">
            <div class="radioLiBox" @click="selfGet=!selfGet">
              <text
                class="liIcon"
                :class="[selfGet?'selected':'']"
              >{{selfGet?"&#xe602;":"&#xe67f;"}}</text>
              <text class="liTxt" :class="[selfGet?'selected':'']">Local pick up</text>
            </div>
          </div>
          <div class="selectLi" v-if="selfGet">
            <text class="liTit">Postcode</text>
            <input
              class="postInput"
              type="number"
              maxlength="4"
              v-model="postcode"
              placeholder="Please enter"
            />
          </div>
          <PropOver
            ref="methPropc"
            coverColor="rgba(0,0,0,0)"
            :buttons="[ {  text: tipsInfo, key: ''   }]"
            :position=" { x: 118, y: -215 }"
            :arrowPosition=" { pos: 'top', x: 120 }"
            :textStyle="{'width':412}"
          ></PropOver>
        </div>
      </div>
    </div>
    <!-- 邮费 -->
    <div class="alertScroll" v-if="popType=='postage'">
      <div class="robox">
        <text class="roTit">Delivery Fee</text>
        <div class="radioBox">
          <div class="radioLi">
            <div class="radioLiBox" @click="postageType='1'">
              <text
                class="liIcon"
                :class="[postageType=='1'?'selected':'']"
              >{{postageType=='1'?"&#xe602;":"&#xe67f;"}}</text>
              <text class="liTxt" :class="[postageType=='1'?'selected':'']">Buyer pays delivery fee</text>
            </div>
            <input class="liInput" type="number" v-model="postage" placeholder="Please enter" />
          </div>
          <div class="radioLi">
            <div class="radioLiBox" @click="postageType='2';postage=''">
              <text
                class="liIcon"
                :class="[postageType=='2'?'selected':'']"
              >{{postageType=='2'?"&#xe602;":"&#xe67f;"}}</text>
              <text class="liTxt" :class="[postageType=='2'?'selected':'']">Offer free postage</text>
            </div>
            <div class="iconqsBox" @click="showPropOver('wxc-popover')">
              <image class="iconqs" src="root:img/iconQS.png" resize="contain" />
            </div>
          </div>
        </div>
        <PropOver
          ref="wxc-popover"
          coverColor="rgba(0,0,0,0)"
          :buttons="btns"
          :position="popoverPosition"
          :arrowPosition="popoverArrowPosition"
          :textStyle="{'width':412}"
        ></PropOver>
      </div>
    </div>
    <!-- 关闭弹窗 -->
    <text class="sureBtn" @click="hidePop('wxcpopup')">Confirm</text>
  </wxc-popup>
  <!-- 选择地址 -->
  <wxc-popup
    height="600"
    pos="bottom"
    ref="showAddress"
    :show="showAddress"
    @wxcPopupOverlayClicked="showAddress=false"
  >
    <CityPicker @confirm="confirm" ref="cityref" />
  </wxc-popup>
  <!-- 发布弹窗 -->
  <wxc-popup
    height="800"
    pos="bottom"
    ref="postpopup"
    :show="showLast"
    @wxcPopupOverlayClicked="showLast=false"
  >
    <selling2 :preveDate="preveDate"></selling2>
  </wxc-popup>
  <!-- 加载 -->
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
  <!-- 图片预览 -->
  <previewPage
    ref="preview"
    @changPoster="changPoster"
    @removePhoto="removePhoto"
    @hidePreview="hidePreview"
  />
</div>
</template>

<script>
const photo = weex.requireModule("photo");
const net = weex.requireModule("net");
import CityPicker from "../../component/citypicker/cityPicker.vue";

const selectCategary = new BroadcastChannel("selectCategary");
const postAddress = new BroadcastChannel("postAddress");
import { WxcPopup } from "weex-ui";
import asCore from "../../mixin/core";
import previewPage from "./preview.vue";
import PropOver from "./propover.vue";
import selling2 from "./selling2.vue";

import {
  upload,
  add_twohand_goods,
  edit_twohand_goods,
  get_goods_info
} from "../../mixin/ajax.js";

export default {
  components: { WxcPopup, PropOver, CityPicker, previewPage, selling2 },
  data() {
    return {
      postcode: "",
      popoverPosition: { x: 200, y: -240 },
      popoverArrowPosition: { pos: "top", x: 120 },
      tipsInfo:
        'Our deliverer will pick up your item whenever you like,you can simply manage the pick-up time at "My GIV"',
      btns: [
        {
          text: "Shipping costs are borne by the seller",
          key: "1"
        }
      ],
      showLast: false, //显示最后一步
      setType: "",
      popType: "method", //弹层内容
      postType: "2",
      postTypeName: "Giv delivery",
      contact_phone: "",
      contact_emails: "",

      postTypeArr: [
        { name: "Australia post", value: "3" },
        { name: "Giv delivery", value: "2" }
      ],
      shopType: "Pre-owned",
      shopTypeArr: ["Pre-owned", "Brand new"],
      postageType: "1",
      postWay1: false,
      postWay2: false,
      longitude: "",
      latitude: "",
      categoryName: "",
      take_address: "",
      refund_address: "",
      take_time: "",
      userId: "",
      dAddress: "",
      categoryid: "",
      refund_name: "",
      price: "",
      orgprice: "",
      showPrice: false,
      selfGet: false,
      showAddress: false,
      showPage: false,
      goodsId: "",
      showMask: false,
      content: "",
      category: "",
      title: "",
      address: "",
      postage: "",
      amount: 0,
      src: "",
      posterIndex: 0,
      sellId: "",
      imgView: [],
      imgList: []
    };
  },
  computed: {
    preveDate() {
      let trade_type = "";
      let option3 = this.selfGet ? "1" : "";
      let option1 = this.postWay1 ? "2" : "";
      let option2 = this.postWay2 ? "3" : "";

      trade_type = option3 + "" + option1 + "" + option2;
      trade_type = trade_type.split("").join(",");

      let label = this.shopType;
      if (this.selfGet) {
        label += ",Local pickup supported";
      }
      if (this.postageType == "2") {
        label += ",Free delivery";
      }
      return {
        id: this.sellId,
        users_id: this.userId,
        categoryid: this.categoryid,
        old_price: this.orgprice,
        price: this.price,
        title: this.title,
        two_location: this.dAddress,
        longitude: this.longitude,
        latitude: this.latitude,
        postcode: this.postcode,
        contact_phone: this.contact_phone,
        contact_emails: this.contact_emails,
        thumb: this.imgList[this.posterIndex],
        thumb_url:
          this.imgList.length > 1 ? this.imgList.join(",") : this.imgList[0],
        label: label,
        stock: "1",
        postage: this.postage,

        content: this.content,
        take_type: trade_type,
        imgList: this.imgList
      };
    }
  },
  created() {
    selectCategary.onmessage = this.changeCategary;
    postAddress.onmessage = this.setAdress;
    this.getPostData();

    asCore.getContext(data => {
      this.refund_name = data.refund_name;
      this.refund_phone = data.refund_phone;
      this.take_address = data.take_address;
      this.take_time = data.take_time;
      this.refund_address = data.refund_address;
    });
  },
  mounted() {
    this.getoacation();
  },
  methods: {
    onLoad(parmar) {
      if (parmar && parmar.parmar) {
        return false;
      }

      asCore.getBsessionid(userId => {
        this.userId = userId;
        if (parmar && parmar.id) {
          this.sellId = parmar.id;
          this.gatGoodInfo(parmar.id);
        }
      });
      var page = weex.requireModule("page");
      page.enableBackKey(false);
      page.setBackKeyCallback(() => {
        if (this.showPage) {
          this.hidePreview();
        } else {
          this.backClick();
        }
      });
    },
    pickAddress() {
      this.showAddress = true;
      // this.$refs.cityref.initdata();
    },
    showPropOver(prpoREfd) {
      this.$refs[prpoREfd].wxcPopoverShow();
    },
    showPreview(index) {
      this.showPage = true;
      this.$refs.preview.initPage(this.imgView, index, this.posterIndex);
    },
    hidePreview() {
      this.showPage = false;
      this.$refs.preview.hidePage();
    },
    changPoster(index) {
      this.posterIndex = index;
    },
    gatGoodInfo(id) {
      get_goods_info(
        {
          users_id: this.userId,
          id: id
        },
        (res, flag) => {
          if (flag) {
            if (res.code == "200") {
              let value = res.data;
              this.imgList = value.thumb_url.split(",");
              this.imgView = value.thumb_url.split(",");
              if (value.label.indexOf("new") > -1) {
                this.shopType = "Brand new";
              }
              this.postage = value.postage;
              this.content = value.content;
              this.title = value.title;
              this.contact_phone = value.contact_phone;
              this.contact_emails = value.contact_emails;

              this.price = value.price;
              this.orgprice = value.old_price;

              // category_name
              // categoryid
              this.categoryid = res.data.categoryid;
              this.categoryName = res.data.category_name;
              if (
                value.take_type.indexOf("1") > -1 ||
                value.label.indexOf("Local") > -1
              ) {
                this.selfGet = true;
              } else if (value.take_type.indexOf("2") > -1) {
                this.postWay1 = true;
              } else if (value.take_type.indexOf("3") > -1) {
                this.postWay2 = true;
              }
            }
          }
        }
      );
    },
    saveData() {
      this.isLoading = true;
      let that = this;
      if (this.preveDate.id) {
        edit_twohand_goods(this.preveDate, (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.message) {
              that.toast(res.message);
            }
            if (res.code == 200) {
              var pref = weex.requireModule("storage");
              pref.removeItem("postData");
              const editSell = new BroadcastChannel("editSell");
              editSell.postMessage("update");
              that.back();
            }
          }
        });
      } else {
        add_twohand_goods(this.preveDate, (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.message) {
              that.toast(res.message);
            }
            if (res.code == 200) {
              var pref = weex.requireModule("storage");
              pref.removeItem("postData");
              that.back();
            }
          }
        });
      }
    },
    /**保存发布信息 */
    savePostData(data) {
      var pref = weex.requireModule("storage");
      pref.setItem("postData", JSON.stringify(data));
    },
    setAdress(row) {
      let data = row.data;
      if (this.setType == "return") {
        this.refund_name = data.name;
        this.refund_phone = data.phone;
        this.refund_address =
          data.address +
          "," +
          data.area +
          ", " +
          data.city +
          "," +
          data.province;
      } else {
      }
    },
    getoacation() {
      const location = weex.requireModule("location");
      if (location && location.start) {
        location.start({ once: false }, res => {
          if (res) {
            if (res.lat) {
              this.latitude = res.lat;
              this.longitude = res.lon;

              let province = res.province || "";
              let city = res.city || "";
              let subLocality = res.subLocality || "";
              if (province) {
                this.dAddress = province + city + subLocality;
              }
            } else {
              this.toast(res);
              this.dAddress = res;
            }
          } else {
            this.dAddress = "定位失败";
          }
        });
      } else {
        this.dAddress = "定位失败";
      }
    },
    gonext(url, parmar) {
      this.push(url, parmar);
    },
    hidePop(name) {
      this.$refs[name].hide();
    },
    returnpage() {
      this.backTo("A");
    },
    uploadConfig(event) {
      let self = this;
      let file = event.target.files[0];
      // let param = new FormData(); // 创建form对象
      self.isLoading = true;
      upload({ type: 3, file: file }, res => {
        self.isLoading = false;
        if (res.message) {
          self.toast(res.message);
        }
        if (res.code == 200) {
          self.imgList.push(res.data.file_url);
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            self.imgView.push(e.target.result);
          };
        }
      });
    },
    changeCategary(res) {
      this.categoryid = res.data.id;
      this.categoryName = res.data.name;
    },
    removePhoto(index) {
      this.imgList.splice(index, 1);
      this.imgView.splice(index, 1);
    },
    postShop() {
      if (!this.title) {
        this.toast("Please enter Title");
        return false;
      }
      if (this.title.length < 3) {
        this.toast("The title should be no less than 3 words");
        return false;
      }
      if (!this.content) {
        this.toast("Please enter Content");
        return false;
      }
      if (this.title.content < 15) {
        this.toast("The content should be no less than 15 words");
        return false;
      }
      if (this.imgList.length == 0) {
        this.toast("Please upload photo");
        return false;
      }
      if (!this.price) {
        this.toast("Please enter Price");
        return false;
      }
      if (this.price == 0 || this.price > 5000) {
        this.toast("Price must be between 0-5000");
        return false;
      }
      if (this.price > this.orgprice) {
        this.toast(
          "The current price shall not be greater than the original price"
        );
        return false;
      }
      if (!this.contact_phone && !this.contact_emails) {
        this.toast("Please enter contact");
        return false;
      }
      let refs = /^(\+?61|04|4)\d{8}$/;
      if (!refs.test(this.contact_phone)) {
        this.toast("Mobile phone number is not standard");
        return false;
      }

      if (!this.selfGet && !this.postWay1 && !this.postWay2) {
        this.toast("Please Select Shipping methods");
        return false;
      }
      if (this.selfGet && !this.postcode) {
        this.toast("Please enter postcode");
        return false;
      }

      // if ((this.postWay1 || this.postWay2) && !this.postage) {
      //   this.toast("Please enter enter postage");
      //   return false;
      // }
      // this.showLast = true;
      this.saveData();
    },
    backClick() {
      let that = this;
      if (!this.content && !this.title && this.imgList.length == 0) {
        that.back();
        return false;
      }
      var modal = weex.requireModule("modal");
      modal.confirm(
        {
          message: "Do you want to save a draft?",
          okTitle: "Save",
          cancelTitle: "Delete",
          duration: 0.3
        },
        value => {
          if (value == "Save") {
            that.savePostData(that.preveDate);
          } else {
            var pref = weex.requireModule("storage");
            pref.removeItem("postData");
          }
          var navigator = weex.requireModule("navigator");
          navigator.back();
        }
      );
    },
    confirm(res) {
      let province = res.province.label;
      let city = res.city.label;
      let county = res.county.label;
      this.dAddress = province + city + county;
      this.showAddress = false;
    },
    getPostData() {
      var pref = weex.requireModule("storage");
      pref.getItem("postData", event => {
        if (event.result == "success") {
          var value = JSON.parse(event.data);
          // this.log(value.imgList);
          if (value.thumb_url) {
            this.imgList = value.thumb_url.split(",");
            this.imgView = value.thumb_url.split(",");
 
          }

          this.shopType = value.label;
          this.postage = value.postage;
          this.content = value.content;
          this.dAddress = value.two_location;
          this.title = value.title;
          this.price = value.price;

          if (value.imgList) {
            this.imgList = value.imgList;
            this.imgView = value.imgList; 
          }
        }
      });
    },
    selectAdd(type) {
      this.setType = type;
      this.push("root:app/user/address/address.js", { type: "post" });
    },
    pickPhoto() {
      var self = this;
      if (this.isWeb) {
      } else {
        photo.open(0, 0, "#000000", "#ffffff", "#ffffff", function(e) {
          self.isLoading = true;
          upload(
            {
              type: 3,
              file: e.path
            },
            res => {
              self.isLoading = false;
              if (res.res.message) {
                self.toast(res.res.message);
              }
              if (res.res.code == 200) {
                self.imgList.push(res.res.data.file_url);
                self.imgView.push(e.path);
              }
            }
          );
        });
      }
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f2f2f2;
  flex: 1;
}

.iconfont {
  font-family: iconfont;
}

.scroller {
  flex: 1;
}

.mask {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.38);
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.mt20 {
  margin-top: 20px;
}
.br {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #999999;
}
.mb50 {
  padding-bottom: 350px;
}
.nowPrice {
  font-family: PingFangSC-Regular;
  font-size: 35px;
  color: #ec414d;
  letter-spacing: 0;
}
.rowbox {
  flex-direction: row;
  align-items: center;
}
.infoP {
  font-family: PingFangSC-Regular;
  font-size: 22px;
  color: #999999;
  letter-spacing: 0;
  margin-right: 10px;
  padding-right: 10px;
}
.check {
  color: #bd8c3b;
  font-size: 40px;
}

.location {
  color: #767676;
  font-size: 40px;
}

.bb {
  border-bottom-color: #333;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.selBox {
  width: 750px;
  padding: 15px 32px;
  background-color: #ffffff;
}

.titleInput {
  height: 100px;
  line-height: 100px;
  font-size: 28px;
}

.textarea {
  width: 686px;
  font-size: 28px;
  line-height: 42px;
  padding-top: 20px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  height: 240px;
}

.imgBox {
  padding-left: 32px;
  padding-right: 15px;
  background-color: #fff;
  flex-direction: row;
  flex-wrap: wrap;
  width: 750px;
}
.row {
  flex-direction: row;
  flex-wrap: wrap;
}

.photoBor {
  position: relative;
  width: 160px;
  height: 160px;
  justify-content: center;
  align-items: center;

  border-radius: 10px;
  margin-right: 15px;
  padding: 10px;
}
.photoItem {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  background-color: #f8f8f8;
}
.photoBox {
  position: relative;
  width: 140px;
  height: 140px;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 10px;
  margin: 10px;
}
.photodel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
}
.posterTxt {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 0;
  height: 44px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #fff;
  width: 140px;
  text-align: center;
  line-height: 44px;
  font-size: 28px;
}
.photoBox:active {
  background-color: #f2f2f2;
}
.clickPhoto {
  width: 60px;
  height: 60px;
}
.fileInput {
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
  height: 140px;
  opacity: 0;
}

.cellItem {
  flex-direction: row;
  align-items: center;
  height: 80px;
}

.newType {
  margin-left: 30px;
  font-size: 28px;
  color: #999999;
}

.bb {
  border-bottom-style: solid;
  border-bottom-color: #ededed;
  border-bottom-width: 1px;
}

.locationBox {
  width: 750px;

  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding: 12px 32px;
  background-color: #ffffff;
}
.locationBox:active {
  background-color: #f2f2f2;
}

.meth_title {
  font-size: 28px;
  color: #333333;
  width: 300px;
}

.meth_right {
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
}

.cityName {
  margin-right: 30px;
  font-size: 28px;
  color: #999999;
  flex: 1;
  text-align: right;
}

.rightIcon {
  font-family: iconfont;
  font-size: 26px;
  color: #999;
}

.shopAlert {
  flex: 1;
  align-items: center;
}

.alertTop {
  width: 686px;
  text-align: left;
  padding-bottom: 32px;
  font-size: 28px;
  color: #333333;
}

.alertScroll {
  flex: 1;
  width: 750px;
  background-color: #fff;
}
.priceCon {
  padding-top: 30px;
}
.robox {
  padding: 32px;
}
.roTit {
  font-size: 28px;
  color: #333333;
}
.radioBox {
}
.radioLi {
  margin-top: 30px;
  flex-direction: row;
  align-items: center;
}
.radioLiBox {
  flex-direction: row;
  align-items: center;
}

.selectLi {
  /* margin-bottom: 30px; */
  width: 686px;
  margin-left: 32px;
  height: 100px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.liTit {
  width: 180px;
  font-size: 28px;
  color: #333333;
}
.inputBoxs {
  flex-direction: row;
  width: 380px;
  height: 80px;
  border-width: 1px;
  border-color: #333333;
  border-style: solid;
  border-radius: 5px;
  align-items: center;
  padding: 0 20px;
}
.priceLabel {
  font-size: 30px;
  color: #303030;
  font-weight: 800;
}

.liInput {
  flex: 1;
  text-align: left;
  padding-left: 10px;
  /* background-color: #0088FB; */
  height: 70px;
  line-height: 70px;
}

.inputPc {
  font-size: 32px;
  color: #303030;
  font-weight: 800;
}
.postInput {
  flex: 1;
  text-align: left;
  /* background-color: #0088FB; */
  height: 80px;
  line-height: 80px;
}

.liCon {
  flex: 1;
  flex-direction: row;
  align-items: center;
}

.radioL {
  flex-direction: row;
  margin-right: 20px;
}

.liIcon {
  font-size: 40px;
  font-family: iconfont;
  color: #999999;
  margin-right: 10px;
}
.iconqs {
  width: 24px;
  height: 24px;
  margin-left: 20px;
}
.iconqsBox {
  width: 80px;
  height: 40px;
  justify-content: center;
}

.liTxt {
  color: #999999;
  font-size: 28px;
}

.selected {
  color: #ba8833;
}

.sureBtn {
  width: 686px;
  height: 80px;
  margin-left: 32px;
  line-height: 80px;
  border-radius: 10px;
  margin-bottom: 14px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.sureBtn:active {
  background-color: #000;
}
.confirmBtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  margin-bottom: 14px;
  position: fixed;
  bottom: 32px;
  left: 32px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}
.confirmBtn:active {
  background-color: #000;
}
</style>
